<template>
	<view class="content">
		<view v-if="isShowSticky" class="position-fixed left-0 w-100" style="top: 44px; z-index: 1000;">
			<u-tabs :list="tabs" name="bname" :is-scroll="false" activeColor="var(--mainColor)" :current="current" @change="change"></u-tabs>
		</view>
		<mescroll-body ref="mescrollRef" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<image :src="$_BASE_IMG_API + bgImage" style="width: 750rpx; height: 365rpx; vertical-align: middle;"></image>
			<view class="" id="tabInList">
				<u-tabs :list="tabs" name="bname" :is-scroll="false" activeColor="var(--mainColor)" :current="current" @change="change"></u-tabs>
			</view>
			<view class="u-m-20" v-if="infoList.length >0" style="height: 500px;">
				<block v-for="(item,index) in infoList" :key="index">
          <group-goods-item :item="item" :index="current"></group-goods-item>
				</block>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import { GroupCenterApi, MineCenterApi } from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				isShowSticky: false,
				bgImage: '',
				navTop: null, // nav距离到顶部的距离 (如计算不准确,可直接写死某个值)
				tabs: [{name:"火热进行中"}, {name: '拼团结束'}],
				current: 0,
				infoList: []
			}
		},
		onPageScroll(e){
			// console.log('滚动条位置 = ' + e.scrollTop + ', navTop = ' + this.navTop);
			if (e.scrollTop >= this.navTop) {
				this.isShowSticky = true // 显示悬浮菜单
			} else {
				this.isShowSticky = false // 隐藏悬浮菜单
			}
		},
		onLoad() {
      
		},
		methods: {
			// 下拉刷新回掉
			downCallback() {
				this._get_config()
				this.mescroll.resetUpScroll() 
			},
			// 上拉加载
			upCallback(page) {
				if(this.isChangeTab) this.mescroll.hideUpScroll(); // 切换菜单,不显示mescroll进度, 显示系统进度条
        uni.showLoading()
				GroupCenterApi.getLists({type: this.current, page: page.num}).then(res=> {
					console.log('一起拼团', res);
          uni.hideLoading()
					if(res.code == 1){
						let result = res.data
						if(page.num == 1) this.infoList = []; //如果是第一页需手动制空列表
						this.infoList = this.infoList.concat(result); //追加新数据
						setTimeout(()=>{
							this.mescroll.endByPage(result.length, res.totalpage)
							// 设置nav到顶部的距离 (需根据自身的情况获取navTop的值, 这里放到列表数据渲染完毕之后)
							// 也可以放到onReady里面,或者菜单顶部的数据(轮播等)加载完毕之后..
							if(!this.navTop) this.setNavTop()
							// 保持tab悬浮,列表数据显示第一条
							if(this.isChangeTab){
								this.isChangeTab = false;
								if(this.isShowSticky) this.mescroll.scrollTo(this.navTop, 0)
							}
						},20)
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			_get_config() {
				MineCenterApi.getConfig().then(res=> {
					console.log('拼团背景图', res);
					if(res.code == 1){
						this.bgImage = res.data.data.images
					}
				})
			},
			// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的navTop数值是最精确的)
			setNavTop(){
				let view = uni.createSelectorQuery().select('#tabInList');
				view.boundingClientRect(data => {
					console.log('tabInList基本信息 = ' + JSON.stringify(data));
					this.navTop = data.top // 到屏幕顶部的距离
				}).exec();
			},
			change(index) {
				console.log(index);
				if(this.current == index) return 
				this.current = index
				this.mescroll.resetUpScroll() 
			},
			
		}
	}
</script>

<style lang="scss" scoped>

</style>
